<html>
<head>
<title>HTML 文档结构 </title>
</head>
<body>
    <div class = "group">
        <!-- <输入框> -->
        <input type = "text" class = "todovalue" name = "todovaluename" placeholder = "请输入TODO内容" onkeydown = "valueChange(event)"/>
        <input type = "button" value = "Button1" onclick = "handleClick()"> </input>
        <button type = "button" id = "Button2"> Button2 </button>
        <!-- <button type = "submit"> Button3 </button> -->
        <!-- <遍历数据> -->
    <div id = "todolist">
        <div class = "item" id = "item0" onmouseenter = "test1(0)" onmouseleave = "test2(0)">
            <input class = "item-chk" type = "checkbox" />
            <span class = "item-sp">吃饭</span>
            <input id = "item-del-0" class = "item-del" type = "button" value = "删除" onclick = "handleDelClick(0)"> </input>
        </div>
        <div class = "item" id = "item1" onmouseenter = "test1(1)" onmouseleave = "test2(1)">
            <input class = "item-chk" type = "checkbox" />
            <span class = "item-sp">睡觉</span>
            <input id = "item-del-1" class = "item-del" type = "button" value = "删除" onclick = "handleDelClick(1)"> </input>
        </div>
        <div class = "item" id = "item2" onmouseenter = "test1(2)" onmouseleave = "test2(2)">
            <input class = "item-chk" type = "checkbox" />
            <span class = "item-sp">游戏1</span>
            <input id = "item-del-2" class = "item-del" type = "button" value = "删除" onclick = "handleDelClick(2)"> </input>
        </div>
        <div class = "item" id = "item3" onmouseenter = "test1(3)" onmouseleave = "test2(3)">
            <input class = "item-chk" type = "checkbox" />
            <span class = "item-sp">游戏2</span>
            <input id = "item-del-2" class = "item-del" type = "button" value = "删除" onclick = "handleDelClick(2)"> </input>
        </div>
    </div>
        <!-- <操作的footer> -->
    </div>
</body>
<style>
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    .group{
        border: 1px solid rgb(0, 255, 247);
        padding: 10px;
        border-radius: 20px;
    }
    .item{
        display: flex;
        align-items: center;
        margin: 3px;
        padding: 3px;
        border-radius: 4px;
    }
    .item:hover{
        background-color: rgb(255, 0, 234);
        transform: scale(1.2);
        transition: all;
    }
    .item-sp{
        flex-grow: 1;
    }
    .item-del{
        flex-grow: 1;
        background-color: rgb(0, 255, 89);
        color:rgb(166, 187, 247);
        border-radius: 10px;
        opacity: 0;
    }
    .item:hover .item-del{
        opacity: 1;
    }
    .todovalue{
        border: 2px solid #3c3b43;
        padding: 6px;
        outline: none;
    }
    .todovalue:focus{
        box-shadow: 0px 0px 9px #22c7a8;
        border: 2px solid #7b40cd;
        outline: none;
    }
    .item:focus{
        box-shadow: 0px 0px 5px #39967a;
        border: 1px solid #1c5690;
        outline: none;
    }
</style>
<script lang = "javascript">
    // alert("test");
    var index = 0;
    function init(){
        document.getElementById("Button2").onclick = handleClick;
        // document.getElementById("input").addEventListener('keyup', function(event){
        //     if(event.keyCode == 13){
        //         var v = document.getElementById("todovalueId").value;
        //         console.log(v);
        //     }
        // })
    }
    function valueChange(event){
        console.log(event);
        if(event.keyCode == 13){
            handleClick();
        }
    }
    function handleClick(){
        var temp = document.getElementsByName("todovaluename")[0].value;
        //alert("我被按了" + temp);
        //change
        // document.getElementById("todolist").innerHTML = temp;
        //add
        // var t = document.getElementById("todolist").innerHTML;
        // document.getElementById("todolist").innerHTML = t + "<div>" + temp + "</div>"; 
        //safeadd 输入 A <div> B </div>
        var div = document.createElement("div");
        div.innerText = temp;
    }
    // function test1(index){
    //     console.log("test12111");
    //     document.getElementById("todolist").children[index].style = "background-color:red";
    //     document.getElementById("item-del-" + index).style = "opacity: 1;";
    // }
    // function test2(index){
    //     console.log("test22222");
    //     document.getElementById("todolist").children[index].style = "";
    //     document.getElementById("item-del-" + index).style = "opacity: 0;";
    // }
    function handleDelClick(index){
        var arr = document.getElementById("todolist");
        document.getElementById("item" + index).remove();
    }
    // init();
</script>
</html>